<!-- 费用报销编辑弹框 -->
<template>
  <div class="uploadFils">
    <el-row :gutter="10">
      <el-col :xs="16" :sm="14" :md="6" :lg="6" :xl="6" class="filter">
        <el-input size="small" v-model="filters.prefix" clearable placeholder="请输入文件名前缀搜索"></el-input>
      </el-col>
      <el-col :xs="8" :sm="10" :md="6" :lg="6" :xl="6" class="filter">
        <el-button type="primary" size="small" icon="el-icon-search" v-on:click="$emit('refresh', filters.prefix)">查询</el-button>
      </el-col>
      <el-col :xs="16" :sm="14" :md="6" :lg="6" :xl="6" class="filter">
        <el-input size="small" v-model="uploadPrefix" clearable placeholder="文件名前缀"></el-input>
      </el-col>
      <el-col :xs="8" :sm="10" :md="6" :lg="6" :xl="6" class="filter">
        <el-upload class="upload-demo" :action="uploadURL" :data="formData" :before-upload="beforeUpload" :on-success="handleSuccess" :show-file-list="false">
          <el-button size="small" type="primary" icon="el-icon-upload2">上传</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-table :data="files" border stripe style="width: 100%">
      <el-table-column prop="key" label="文件名称"></el-table-column>
      <el-table-column prop="mimeType" label="文件类型"></el-table-column>
      <el-table-column prop="fsize" label="文件大小"></el-table-column>
      <el-table-column sortable prop="putTime" label="上传时间">
        <template slot-scope="scope">{{formatTime(scope.row.putTime)}}</template>
      </el-table-column>
      <el-table-column width="80px">
        <template slot-scope="scope">
          <el-button size="small" type="text">
            <a :href="prefix + scope.row.key">下载</a>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column width="80px" v-if="isShowDel">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="deleteFile(scope.row.key)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { myURL, uploadURL } from '@/utils/upload';
import { deleteFile } from '@/api/file';
import moment from 'moment'

export default {
  props: {
    //文件列表
    files: {
      type: Array,
      default: () => []
    },
    //是否展示删除列(默认显示删除列,可自定义)
    isShowDel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      newList: [],
      prefix: myURL,
      uploadURL: uploadURL,
      formData: {
        token: '',
        key: ''
      },
      uploadPrefix: '',
      filters: {
        prefix: ''
      }
    };
  },

  methods: {
    //上传前判断
    async beforeUpload(file) {
      if(!this.formData.token) {
        this.formData.token = await this.$store.dispatch('getUpToken')
      } 
      //文件数量判断
      this.formData.key = this.uploadPrefix + file.name

      //大小判断
      const isLt300M = file.size / 1024 / 1024 < 300;
      if (!isLt300M) {
        this.$message.error('上传文件大小不能超过 300MB!');
      }
      return isLt300M;
    },
    handleSuccess(res, file) {
      this.$emit('refresh', this.filters.prefix)
    },
    deleteFile(key) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFile({ key: key }).then(res => {
          if (res.flag) {
            this.$notify.success("删除成功")
            this.$emit('refresh', this.filters.prefix)
          } else {
            this.$notify.error("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    formatTime(value) {
      return moment(value).format("YYYY-MM-DD HH:mm")
    },
  },
};
</script>

<style scoped>
.uploadFils {
  width: 100%;
  margin-top: 20px;
  padding: 4px;
  min-height: 100px;
  box-sizing: border-box;
}

.filter {
  margin-bottom: 10px;
}
</style>